<template>
	<view class="post-card" @click="todetail">
	  <view class="user-header">
	    <image class="avatar" src="/static/images/人物.png"></image>
	    <view class="user-info">
	      <view class="username">{{creater.username}}</view>
	      <view class="post-time">{{obj.updateTime}}</view>
	    </view>
	    <view class="more-options">⋮</view>
	  </view>
	  
	  <view class="post-content">
	{{showcontent}}
	</view>
	  

	  <view class="interaction-bar">
	   <!-- <view class="interaction-item">
	      <span class="icon">👍</span>
	      <span class="count">330</span>
	    </view>
	    <view class="interaction-item">
	      <span class="icon">💬</span>
	      <span class="count">5</span>
	    </view>
	    <view class="interaction-item">
	      <span class="icon">↗️</span>
	      <span class="count">25</span>
	    </view> -->
	  </view>
	</view>
</template>

<script>
	import myrequest from "@/untils/request.js"
	export default{
		name:"finditem",
		props:{
			obj:{
				type:Object,
				default:{}
			}
		},
		data(){
			return{
				creater:null
			}
		},
		computed:{
			showcontent:{
				get() {
					return this.removeHtmlTags(this.$props.obj.content?.substr(0,200))
				}
			}
	
		},
		methods:{
			 removeHtmlTags(str) {
			  // 正则表达式解释:
			  // <     - 匹配左尖括号
			  // .*?   - 非贪婪匹配任意字符（尽可能少地匹配）
			  // >     - 匹配右尖括号
			  // g     - 全局匹配模式
			  return str.replace(/<.*?>/g, '');
			},
			getuserdata(){
				// console.log(this.$props.obj);
				myrequest.getuserid(this.$store.state.token,this.$props.obj.createId)  //获取评论者
				 .then(r=>{
					  this.creater=r.data.data
				 })
			},
			todetail(){
				// console.log("跳转到详细");
				uni.navigateTo({
					url:"/pages/router/detail/detail",
				})
				setTimeout(()=>{
					uni.$emit("todetail",{obj:this.$props.obj})
				},1000)
			}
		},
		mounted() {
			this.getuserdata()
		}
	}
</script>

<style>
	.post-card {
	  background-color: #fff;
	  border-radius: 12px;
	  margin-bottom: 16px;
	  padding: 16px;
	  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	  transition:all .5s;
	  box-shadow: #666 2px 0px 7px 0px ;
	}
	
	.post-card:active{
		transform: translateY(4px) scale(0.95);
		filter: brightness(0.9);
		box-shadow: #fff 2px 0px 7px 0px;
	}
	
	.user-header {
	  display: flex;
	  align-items: center;
	  margin-bottom: 12px;
	}
	
	.avatar {
	  width: 42px;
	  height: 42px;
	  border-radius: 50%;
	  background-color: #f0f0f0;
	  margin-right: 12px;
	  overflow: hidden;
	}
	
	.user-info {
	  flex: 1;
	}
	
	.username {
	  font-weight: bold;
	  font-size: 16px;
	  margin-bottom: 2px;
	}
	
	.post-time {
	  color: #888;
	  font-size: 13px;
	}
	
	.more-options {
	  font-size: 24px;
	  color: #666;
	  padding: 8px;
	  margin: -8px;
	  cursor: pointer;
	}
	
	.post-content {
		/* max-height: 3ch; */
		/* overflow: hidden; */
		/* text-overflow: ellipsis; */
	  font-size: 15px;
	  line-height: 1.5;
	  margin-bottom: 14px;
	  color: #333;
	}
	
	.post-images {
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  gap: 8px;
	  margin-bottom: 16px;
	}
	
	.post-image {
	  aspect-ratio: 16/9;
	  background-color: #f5f5f7;
	  border-radius: 8px;
	  background-image: linear-gradient(135deg, #ffd166 0%, #ff9800 100%);
	  position: relative;
	  overflow: hidden;
	}
	
	.interaction-bar {
	  display: flex;
	  justify-content: space-between;
	  padding-top: 12px;
	  border-top: 1px solid #f0f0f0;
	}
	
	.interaction-item {
	  display: flex;
	  align-items: center;
	  font-size: 14px;
	  color: #666;
	}
	
	.icon {
	  margin-right: 6px;
	  font-size: 16px;
	}
	
	.count {
	  font-weight: 500;
	}
	
</style>